<template>
  <div class="login-container">
    <div class="login-box">
      <h2 style="text-align: center;font-size: 18px;margin-top: 20px;">用户登录</h2>

      <VanForm style="margin-top: 20px;" @submit="handleLogin" class="login-form">
        <!-- 用户名 -->
        <VanCellGroup inset>
        <VanField
            v-model="username"
            name="username"
            autocomplete="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
        />
        </VanCellGroup>
        <!-- 密码 -->
        <VanCellGroup inset>
        <VanField
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            autocomplete="current-password"
            :rules="[{ required: true, message: '请输入密码' }]"
        />
        </VanCellGroup>
        <!-- 记住我 + 忘记密码 -->
        <div class="options">
          <VanCheckbox style="font-size: 18px"
                        v-model:checked="rememberMe"
                        @click="handleCheckboxChange"
          >{{ rememberMe ? '管理员' : '用户'}}</VanCheckbox>
          <span style="font-size: 18px">忘记密码？</span>
        </div>

        <!-- 登录按钮 -->
        <div class="login-button">
          <VanButton round block type="primary" native-type="submit">
            登录
          </VanButton>
        </div>
      </VanForm>

      <!-- 第三方登录 -->
      <div class="third-party-login">
        <p style="font-size: 16px;">第三方登录</p>
        <div class="icons">
          <VanIcon name="wechat" size="16" />
          <VanIcon name="qq" size="16" />
        </div>
      </div>

      <!-- 注册链接 -->
      <div class="register-link" style="margin-top: auto;">
        <p style="font-size: 18px">没有账号？<a style="font-size: 18px" href="/register">立即注册</a></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import request from "@/utils/request.js";

const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const data = reactive({
  role: 'USER',
  username: '',
  password: '',
})

const handleLogin = () => {
  console.log('✅ 开始执行登录函数');
  // TODO: 调用登录接口
      data.username = username.value;
      data.password = password.value;
      console.log('提交登录:',
        data.username,
        data.password,
        data.role
);
  request.post('/login', {
    username: data.username,
    password: data.password,
    role: data.role,
  }).then((res) => {
    // 将token保存到本地
    localStorage.setItem('code_user',JSON.stringify(res.data || {}))
    console.log('登录成功:', res);
    // TODO: 跳转到首页
    window.location.href = '/';
  }).catch((err) => {
    console.log('登录失败:', err);
  });
};
const handleCheckboxChange = (checked) => {
  rememberMe.value = !rememberMe.value;
  console.log('记住我:', rememberMe.value);
};
</script>
<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column; /* 修改为垂直布局 */
  justify-content: center; /* 内容垂直居中 */
  align-items: center; /* 水平居中 */
}
.login-box {
  width: 90%;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex: 1; /* 新增：让 login-box 占据剩余空间 */
  display: flex;
  flex-direction: column; /* 改为纵向 flex 布局 */
  padding-top: 120px;
  padding-bottom: 20px;
}
.options{
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.login-button{
  margin-top: 20px;
}
.third-party-login{
  margin-top: 20px;
}
.third-party-login{
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.register-link{
  text-align: center;
  margin-top: auto;
}
</style>